import React, { useState, useEffect } from 'react';
import { useSearchParams } from "react-router-dom";
import { LoadingOutlined } from '@ant-design/icons';
import { Spin } from 'antd';
import { indexSearch } from '../../api/indexApi'

// 关键字染色
import { highlightSearchResult, formatTime, formatNumber } from '../../math'

// 加载图标样式
const antIcon = (
    <LoadingOutlined
        style={{
            fontSize: 24,
        }}
        spin
    />
);
function Videos() {
    const [searchPool, setSearchPool] = useState([]); // 搜索结果池

    const [loading, setLoading] = useState([]); // 加载状态

    const [searchParams] = useSearchParams(); // 搜索参数
    const s = searchParams.get('s');

    // 搜索专辑，结果赋值到searchPool
    useEffect(() => {
        if (s) {
            setLoading(true)
            indexSearch(s, '1014', 20)
                .then((res) => {
                    if (res.data.result.videoCount) {
                        setSearchPool(res.data.result.videos)
                        setLoading(false)
                    } else {
                        setLoading(false)
                    }
                })
                .catch((err) => {
                    console.error(err)
                    setLoading(false)
                })
        } else {
            setLoading(false)
        }
    }, [s]);
    return (
        <div>
            <div className='count'> 搜索"{s}",找到<span>{searchPool.length}</span>个视频</div>
            {
                loading ? (
                    <Spin indicator={antIcon} tip="Loading"><div className='loadingbox'></div></Spin>
                ) : (
                    <div className='searchVideosContainer'>
                        {searchPool.map((item) => {
                            let creator = item.creator.map((a) => { return <span key={a.userId} title={a.userName} className='linka'>{highlightSearchResult(a.userName, s)}</span> })
                            return <li className='searchliVideos' key={item.vid}>
                                
                                {/* 视频封面图片 */}
                                <a className='mk' title={item.title}>
                                    <svg className='playicon' t="1678342812102" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2755"><path d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m196.546667 500.493333l-266.666667 176A37.333333 37.333333 0 0 1 384 688V336.033333a37.333333 37.333333 0 0 1 57.893333-31.16l266.666667 176a37.333333 37.333333 0 0 1 0 62.32z" p-id="2756"></path></svg>
                                    <div className='videosinfo'>
                                        {/* 视频时长 */}
                                        <p className='durationms'>{formatTime(item.durationms)}</p>
                                        {/* 播放量 */}
                                        <p className='playTime'><svg t="1678188634990" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13807"><path d="M864 896H160c-52.8 0-96-43.2-96-96V224c0-52.8 43.2-96 96-96h704c52.8 0 96 43.2 96 96v576c0 52.8-43.2 96-96 96zM160 192c-17.6 0-32 14.4-32 32v576c0 17.6 14.4 32 32 32h704c17.6 0 32-14.4 32-32V224c0-17.6-14.4-32-32-32H160z m273.6 480c-4.8 0-11.2-1.6-16-4.8-9.6-6.4-16-16-16-27.2V384c0-11.2 6.4-22.4 16-27.2 9.6-6.4 22.4-6.4 32 0l222.4 128c9.6 6.4 16 16 16 27.2s-6.4 22.4-16 27.2l-222.4 128c-4.8 3.2-11.2 4.8-16 4.8z m32-232v145.6l126.4-72L465.6 440z" fill='#fff' p-id="13808"></path></svg>{formatNumber(item.playTime)}</p>
                                    </div>
                                    <img src={item.coverUrl} />
                                </a>
                                {/* 视频名字 */}
                                { item.type === '0'? (
                                    <div title={item.title} className='name'>
                                        <svg t="1677842393758" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2818" width="200" height="200"><path d="M807.538 408.872l-99.22 231.336c-5.233 12.162-16.68 19.405-28.892 19.837a86.04 86.04 0 0 1-2.907 0c-12.311-0.416-23.858-7.66-29.108-19.837L561.499 441.17v185.847c0 18.359-14.87 33.228-33.228 33.228s-33.23-14.87-33.23-33.228V527.93l-66.755 115.618c-6.396 11.081-18.208 16.93-30.154 16.448-11.43 0.482-22.745-5.367-28.86-16.448l-73.601-133.28v116.749c0 18.359-14.87 33.228-33.229 33.228s-33.229-14.87-33.229-33.228V394.418c0-18.36 14.87-33.229 33.23-33.229 14.104 0 26.067 8.822 30.902 21.2 4.719 2.824 104.786 180.48 104.786 180.48l96.91-167.853s14.87-33.827 33.229-33.827c10.051 0 18.94 4.553 25.037 11.597 3.09-3.538 6.895-6.53 11.414-8.573 16.83-7.642 36.435-0.016 43.778 17.013l69.447 160.908 69.015-160.908c7.31-17.03 26.799-24.656 43.53-17.013 16.714 7.626 24.357 27.63 17.047 44.66z" p-id="2819"></path><path d="M927.011 294.733c0-82.573-66.939-149.528-149.528-149.528H245.83c-82.59 0-149.528 66.955-149.528 149.528v431.969c0 82.589 66.939 149.527 149.528 149.527h531.653c82.59 0 149.528-66.938 149.528-149.527v-431.97zM794.097 942.686H229.214c-110.102 0-199.37-89.268-199.37-199.37V278.117c0-110.102 89.268-199.37 199.37-199.37h564.883c110.102 0 199.37 89.268 199.37 199.37v465.197c0 110.103-89.268 199.371-199.37 199.371z" p-id="2820"></path></svg>
                                        <span className='linka'>{highlightSearchResult(item.title,s)}</span>
                                    </div>
                                    ) : (
                                    <p title={item.title} className='name nomvname linka'>{highlightSearchResult(item.title,s)}</p>
                                ) }
                                {/* 创建者 */}
                                <span title={item.creator} className='creator linka'>{creator}</span>
                            </li>
                        })}
                    </div>
                )
            }
        </div>
    )
}

export default Videos;